<!-- subpkg_medicine/order_detail/index.vue -->
<script lang="ts" setup>
  import { useMedicalDetail } from '@/hooks/order'

  // 定义 Props
  interface Props {
    id: string
  }
  // 接收 Props
  const props = defineProps<Props>()
  // 调用hooks内部方法获取订单详情
  const { medicineOrderDetail } = useMedicalDetail(props.id)

  //再次购买
  const buyAgain = () => {}
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label">药品订单 {{ medicineOrderDetail.actualPayment }}元</text>
          <text class="status">{{ medicineOrderDetail.statusValue }}</text>
        </view>
        <view class="order-shippment">
          <template v-if="medicineOrderDetail.status === 10">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{ medicineOrderDetail.addressInfo?.city }}
              {{ medicineOrderDetail.addressInfo?.county }}
            </view>
            <view class="detail">{{ medicineOrderDetail.addressInfo?.addressDetail }}</view>
            <view class="receiver"
              >{{ medicineOrderDetail.addressInfo?.receiver! }}
              {{ medicineOrderDetail.addressInfo?.mobile }}</view
            >
          </template>
          <template v-else>
            <navigator
              hover-class="none"
              :url="`/subpkg_medicine/timeline/timeline?id=${medicineOrderDetail.id}`"
            >
              <view class="marker">{{ medicineOrderDetail.expressInfo.content }}</view>
              <view class="datetime">{{ medicineOrderDetail.expressInfo.time }}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <template v-for="(item, index) in medicineOrderDetail.medicines" :key="item.id">
          <view class="medicine-list-item">
            <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
            <view class="medicine-info">
              <text class="name">{{ item.name }}</text>
              <text class="unit">{{ item.specs }}</text>
              <text class="price">¥{{ item.amount }}</text>
            </view>
            <view class="quantity">x{{ item.quantity }}</view>
            <view class="guide">{{ item.usageDosag }}</view>
          </view>
        </template>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${medicineOrderDetail.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${medicineOrderDetail.expressFee}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${medicineOrderDetail.couponDeduction}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${medicineOrderDetail.actualPayment}`" />
          <uni-list-item title="订单编号" :right-text="medicineOrderDetail.id" />
          <uni-list-item title="创建时间" :right-text="medicineOrderDetail.createTime" />
          <uni-list-item
            title="支付方式"
            :right-text="medicineOrderDetail.paymentMethod ? '支付宝支付' : '微信支付'"
          />
        </uni-list>
      </view>

      <view class="notice-bar" v-if="medicineOrderDetail.status === 10">
        <uni-notice-bar
          :text="`请在 ${medicineOrderDetail.countDown} 内完成支付，超时订单将取消`"
        />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="medicineOrderDetail.status === 10">
          <view class="total-amount">
            需付款: <text class="number">¥{{ medicineOrderDetail.actualPayment }}</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button" @click="buyAgain">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
